<template>
	<!-- 公司文件页面 -->
	<view class="bigBox">
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" title="文件管理" title-color="#fff"
			:title-size="40">
			<!-- 头部筛选 -->
			<view class="headFeatures" slot="companyDocuments">
				<u-button @click="show = true" :hair-line="false" class="uButton">
					<u-icon name="plus-circle-fill" color="#898CEA" size="45" style="margin-right: 5px;"></u-icon>
					<text>筛选</text>
				</u-button>
				<view>
					<view>
						<!--  箭头向下 - 降序1 - 大到小     箭头向上 - 升序0 - 小到大 -->
						<u-icon name="arrow-up" color="#2979ff" size="28" @click="timeSequence"
							:class="turnDirection?'turn_direction':'turn_direction2'"></u-icon>
					</view>
					<!-- 时间选择 -->
					<u-button @click="show3 = true" :hair-line="false" class="uButton uButton2">
						<u-icon name="clock" color="#2979ff" size="30" style="margin:2rpx 10rpx 0 0;"></u-icon>时间筛选
					</u-button>
					<!-- 刷新 -->
					<u-icon name="reload" color="#2979ff" size="40" class="resetIcon"
						:class="refresh?'resetIconRotate':''" @click="resetIcon()"></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 时间选择模块 - 展示 -->
		<u-calendar v-model="show3" :mode="mode" @change="timeChange"></u-calendar>

		<!-- 公司文件展示区域 -->
		<view v-show="yesOrNo" class="departmentShow">
			<view v-for="(item,index) in fileSet" :key="index" class="cardView" @click.stop="downloadFile(item)">
				<view class="imgView">
					<image v-if="item.fileType=='pdf'" src="../../static/fileImg/pdf.png" mode="widthFix"></image>
					<image v-else-if="item.fileType=='excel'" src="../../static/fileImg/excel.png" mode="widthFix">
					</image>
					<image v-else-if="item.fileType=='ppt'" src="../../static/fileImg/ppt.png" mode="widthFix"></image>
					<image v-else-if="item.fileType=='jpg'||item.fileType=='png'" src="../../static/fileImg/tupian.png"
						mode="widthFix">
					</image>
					<image v-else-if="item.fileType=='word'" src="../../static/fileImg/word.png" mode="widthFix">
					</image>
					<image v-else-if="item.fileType=='zpi'" src="../../static/fileImg/zpi.png" mode="widthFix"></image>
					<image v-else src="../../static/fileImg/others.png" mode="widthFix"></image>
				</view>
				<view class="textView">
					<!-- 文件名称 -->
					<scroll-view class="scroll-view_H" :scroll-x="true">
						<view>{{item.file_name}}</view>
					</scroll-view>
					<view>
						<!-- 上传人 -->
						<text>{{item.user.real_name}}</text>
						<!-- 上传时间 -->
						<text>{{item.created_at}}</text>
						<!-- 上传部门 -->
						<text>{{item.department.title}}</text>
					</view>
					<view>
						<text class="label_text">{{item.fileCate.title}}</text>
						<text class="label_text">{{item.fileType}}</text>
					</view>
				</view>
				<u-icon name="download" color="#2979ff" size="35"></u-icon>
			</view>
		</view>
		<u-modal v-model="show2" content="是否要下载文件" :show-cancel-button="true" @confirm="confirm"></u-modal>
		<u-empty v-show="!yesOrNo" text="未找到文件!" mode="favor" font-size="25" icon-size="150" margin-top="200">
		</u-empty>



		<!-- 弹出层 - 部门选择 - 文件选择 -->
		<u-popup v-model="show">
			<u-navbar :is-back="false" :border-bottom="false" title="筛选要求" title-color="#fff" :title-size="40">
			</u-navbar>
			<!-- 全部按键 -->
			<view class="btnSet">
				<uni-section title="部门选择" type="line" class="drop_down_box">
					<uni-data-select v-model="departValue" :localdata="optionsButton" @change="departChange">
					</uni-data-select>
				</uni-section>

				<uni-section title="分类选择" type="line" class="drop_down_box">
					<uni-data-select v-model="categoryValue" :localdata="categoryButton"></uni-data-select>
				</uni-section>

				<uni-section title="文件类型" type="line" class="drop_down_box">
					<uni-data-select v-model="fileType" :localdata="fileButton"></uni-data-select>
				</uni-section>
				<u-divider>文件搜索</u-divider>
				<view class="search searchFile1">
					<u-input v-model="keyWord" :clearable="true" placeholder="请输入搜索内容" placeholder-style="paddingLeft:0"
						:custom-style="uInput1" :trim="true" />
					<u-button :disabled="isDisabled" @click="searchIcon">搜索</u-button>
				</view>

				<view class="subBtn">
					<button @click="resetBtn">重 置</button>
					<button @click="determine">确 认</button>
				</view>
			</view>
		</u-popup>
		<view style="line-height: 60rpx;text-align: center;color: #c8c9cc;padding-bottom: 40rpx;">{{loadMorePrompt}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				turnDirection: false, //顶部时间排序
				orderType: 1, //1降序，0升序

				refresh: false, //顶部刷新按钮
				show: false, //筛选弹出框
				show2: false, //模态框
				show3: false, //日期选着框 
				mode: 'range', //日期选择模式
				timeInterval: {
					startTime: "", //开始时间
					endTime: "" //结束时间
				},

				yesOrNo: true,
				keyWord: '', //输入框的值

				//部门选择
				departValue: "",
				optionsButton: [ //
					{
						value: "1",
						text: "个人"
					}, {
						value: "2",
						text: "部门",
					}, {
						value: "3",
						text: "公司"
					},
				],
				//分类选择
				categoryValue: "",
				categoryButton: [],
				//弹框 - 文件名称
				fileType: "",
				fileButton: [ //
					{
						value: "word",
						text: "word"
					}, {
						value: "ppt",
						text: "ppt"
					}, {
						value: "excel",
						text: "excel"
					}, {
						value: "jpg",
						text: "jpg"
					}, {
						value: "png",
						text: "png"
					}, {
						value: "other",
						text: "other"
					},
				],
				fileSet: [], // 文件 卡片所有信息

				isDisabled: true, //控制搜索按钮的禁用与否
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},

				aItemData: {}, //所要下载的某个文件

				allPage: 0, //总页数
				page: 1, //当前页
				loadMorePrompt: '上拉加载更多...',
			}
		},
		methods: {
			// 所有数据重置方法
			dataReset() {
				this.fileType = ""
				this.departValue = ""
				this.categoryValue = ""
				this.categoryButton = []
				this.page = 1
				this.keyWord = ""
				this.yesOrNo = true
				this.fileSet = []
				this.timeInterval.startTime = ""
				this.timeInterval.endTime = ""
				this.ordertype = 0
				this.aItemData = {}
			},
			// 顶部时间排序 
			timeSequence() {
				this.turnDirection = !this.turnDirection
				this.turnDirection ? this.orderType = 0 : this.orderType = 1
				this.fileSet = []
				setTimeout(() => {
					this.getfileList()
				}, 200)
			},
			searchIcon() { //搜索按钮
				this.fileSet = []
				this.getfileList()
			},
			determine() { //弹出框 确认按键
				this.fileSet = []
				setTimeout(() => {
					this.getfileList()
				}, 100)
			},
			resetBtn() { //弹出框 重置按键
				this.dataReset()
				setTimeout(() => {
					this.getfileList()
				}, 200)
			},
			resetIcon() { //列表顶部重置
				this.refresh = true
				this.dataReset()
				setTimeout(() => {
					this.getfileList()
				}, 200)
			},
			downloadFile(item) { //文件下载 - 激活模态框
				this.aItemData = item
				this.show2 = true
			},
			confirm() { //模态框 文件下载
				let filePath = this.aItemData.file_path //文件地址
				uni.showLoading({
					title: '下载中...'
				})
				filePath.forEach(item => {
					uni.downloadFile({
						url: item,
						success: (data) => {
							uni.hideLoading()
							let fileType = item.split(".")[item.split(".").length - 1]
							if (fileType == 'jpg' || fileType == 'png') { //下载成功后，保存图片到相册
								uni.saveImageToPhotosAlbum({
									filePath: data.tempFilePath,
									success(res) {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '图片已经保存到相册',
											duration: 1000,
										});
									},
									fail: (err) => {
										uni.showModal({
											title: '获取权限提示',
											content: "需要您授权保存相册",
											duration: 3000,
											success(res) {
												if (res.confirm) { //模态框点击确认
													uni.openSetting() //跳转权限设置页面
												}
											}
										});
									}
								})
							} else { //保存非图片文件
								uni.saveFile({
									tempFilePath: data.tempFilePath,
									success(res) {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '文件已保存',
											duration: 1000,
										});
										uni.openDocument({
											filePath: res.savedFilePath,
											success: (res) => {
												console.log(res, '打开成功1');
											},
											fail: (err) => {
												console.log(err, '打开失败2');
											}
										});
									},
									fail: (err) => {
										console.log(err, '保存失败');
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '文件保存失败',
											duration: 1000,
										})
									}
								})
							}
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						}
					});
				})

			},
			timeChange(e) { //时间选择请求列表数据
				// this.timeInterval.startTime = new Date(e.startDate).getTime() / 1000
				// this.timeInterval.endTime = new Date(e.endDate).getTime() / 1000
				this.timeInterval.startTime = e.startDate
				this.timeInterval.endTime = e.endDate
				console.log('开始时间', this.timeInterval.startTime, '结束时间', this.timeInterval.endTime);
				this.fileSet = []
				this.getfileList()
			},
			getfileList() { //公司文件 列表数据
				this.loadMorePrompt = '加载中...'
				uni.showLoading({
					title: '加载中...'
				})
				this.$http(this.$api.fileList, {
					page: this.page,
					file_name: this.keyWord, // 搜索
					type: this.departValue, // 部门
					cate_id: this.categoryValue, // 分类
					file_type: this.fileType, //文件类型
					start_at: this.timeInterval.startTime, // 时间选择
					end_at: this.timeInterval.endTime,
					ordertype: this.orderType // 升序、降序
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '加载成功',
						icon: 'none',
					})
					// 总数/一页展示的个数
					let arr = []
					res.data.list.forEach(item => {
						let a = item.file_path[0].split('.')
						arr.push({
							...item,
							fileType: a[a.length - 1]
						})
					})
					this.allPage = Math.ceil(res.data.count / res.data.list.length)
					this.fileSet = [...this.fileSet, ...arr]
					this.refresh = false
					this.show = false
					if (res.data.list.length == 0) {
						this.yesOrNo = false
					} else {
						this.yesOrNo = true
					}
					this.loadMorePrompt = '上拉加载更多...'
					if (res.data.list.length <= res.data.count) {
						this.loadMorePrompt = '没有更多的文件了 ~~~'
					}
				})
				uni.stopPullDownRefresh()
			},
			// 部门选择后,出现分类 - 联动
			departChange(e) {
				this.$http(this.$api.pointsClassGetCate, {
					type: e
				}).then((res) => {
					if (res.code == 0) {
						let arr = []
						res.data.list.forEach((item, index) => {
							arr.push({
								value: item.id,
								text: item.title
							})
						})
						this.categoryButton = arr
					}
				})
			},
		},
		onPullDownRefresh() { //下拉刷新
			this.dataReset()
			setTimeout(() => {
				this.getfileList()
			}, 200)
		},
		onReachBottom() { //上拉加载更多
			if (this.page == this.allPage) return
			else this.page++;
			this.getfileList()
		},
		onLoad() {
			this.getfileList() //公司文件 列表数据
		},
		watch: {
			keyWord() { //监视搜索框的值，空时，隐藏显示区
				if (this.keyWord == "") {
					this.isDisabled = true
				} else if (this.keyWord != "") {
					this.isDisabled = false
				}
			}
		},
	}
</script>

<style lang="scss">
	@mixin flex_layout {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// 文件展示卡片
	.textView {
		width: 60%;
		white-space: nowrap;

		.scroll-view_H {
			display: inline-block;
			font-weight: 900;
			width: 100%;
			letter-spacing: 3rpx;
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
		}

		>view:nth-child(2) {
			@include flex_layout;
			font-size: 20rpx;
			color: #909399;
			margin: 10rpx 0;
		}

		>view:nth-child(3) {
			@include flex_layout;
			justify-content: flex-start;
			font-size: 20rpx;
			color: #909399;

			>.label_text {
				border: #78AAE8 1px solid;
				border-radius: 5rpx;
				padding: 0rpx 15rpx;
				margin-right: 10rpx;
				font-size: 18rpx;
			}
		}
	}



	// 左侧弹出框 - 下拉框
	.btnSet {
		.drop_down_box {
			.uni-section {
				margin-bottom: 20px;
			}
		}

		u-divider {
			>.u-divider {
				margin: 20px 0 10px !important;
			}
		}
	}

	/* 顶部时间排序 */
	.turn_direction {
		transition: all 0.5s;
		transform: rotate(-360deg);
	}

	.turn_direction2 {
		transition: all 0.5s;
		transform: rotate(-180deg);
	}

	/* 头部筛选 */
	.headFeatures {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 5rpx 10rpx #ccc;
		background-color: #fff;
	}

	.headFeatures>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uButton {
		/* width: 22% !important; */
		display: block;
	}

	.uButton>button {
		border: none !important;
		margin-top: 3px;
	}

	.uButton2 {
		margin-right: 30rpx;
		width: 200rpx;
	}

	.resetIcon {
		/* 顶部刷新按钮 */
		margin-right: 20px;
	}

	.resetIconRotate {
		/* 刷新功能样式 */
		transition: all 0.8s;
		transform: rotate(720deg);
	}

	/* 部门展示区 文件卡片  */
	.departmentShow {
		padding: 10px;
		padding-top: 0;
		margin-top: 130rpx;
	}

	.cardView {
		display: flex;
		align-items: center;
		box-shadow: 0 3px 5px #f4f4f5;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		margin: 0 5px 15px;
	}

	.imgView {
		width: 20%;
		margin-right: 30rpx;
	}

	.imgView>image {
		display: block;
		width: 100%;
	}



	.cardView>u-icon {
		position: relative;
		top: 25rpx;
		right: -40rpx;
	}

	/* 点击 弹出左侧模块 */
	.btnSet {
		height: calc(100vh - 170rpx);
		padding: 10px;
		width: 500rpx;
		position: relative;
	}

	// .chooseButton {
	// 	/* 按钮被选中后的样式 */
	// 	background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
	// 	color: #fff !important;
	// }

	.search {
		/* 弹出框内 搜索框 */
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #dfe2e55e;
		border-radius: 15px;
		overflow: hidden;
		height: 30px;
		line-height: 30px;
	}

	u-input {
		width: 78%;
	}

	u-button {
		width: 20%;
	}

	button {
		font-size: 25rpx !important;
	}

	.search button {
		display: block;
		color: #fff !important;
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
	}

	.subBtn {
		/* 弹出框底部 重置确认按键 */
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		margin-top: 100rpx;
	}

	.subBtn>button {
		width: 45%;
		padding: 2rpx 0;

	}

	.subBtn>button:last-child {
		color: #fff;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}
</style>
